<!--

=========================================================
* Pixel Pro Bootstrap 4 UI Kit
=========================================================

* Product Page: https://themesberg.com/product/ui-kits/pixel-pro-premium-bootstrap-4-ui-kit
* Copyright 2019 Themesberg (https://www.themesberg.com)

* Coded by https://themesberg.com

=========================================================

* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

-->
<!DOCTYPE html>
<html lang="en">

<head>
    @@include('./_head.html', {
        "path": "../..",
        "title": "Pixel Documentation - Breadcrumbs"
    })
</head>

<body>
    <a href="#doc-index" class="btn btn-lg btn-primary btn-block rounded-0 d-lg-none" data-toggle="collapse" data-target="#doc-index" aria-expanded="false" aria-controls="doc-index">
        <svg class="icon fill-white" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 17C3 17.5523 3.44772 18 4 18H20C20.5523 18 21 17.5523 21 17V17C21 16.4477 20.5523 16 20 16H4C3.44772 16 3 16.4477 3 17V17ZM3 12C3 12.5523 3.44772 13 4 13H20C20.5523 13 21 12.5523 21 12V12C21 11.4477 20.5523 11 20 11H4C3.44772 11 3 11.4477 3 12V12ZM4 6C3.44772 6 3 6.44772 3 7V7C3 7.55228 3.44772 8 4 8H20C20.5523 8 21 7.55228 21 7V7C21 6.44772 20.5523 6 20 6H4Z" />
        </svg>
        <span class="h6 text-white">Menu</span>
    </a>
    <section class="container-fluid py-4">
        <div class="row">
            @@include('./_docs-sidebar.html', {
                "path": "../..",
                "docs-path": ".."
            })
            <!-- Content -->
            <div class="col-12 col-lg-10">
                <div class="row">
                    <div class="col-xl-10 col-lg-9 px-xl-5 px-lg-3 px-md-3 py-md-5">
                        <div class="border-bottom">
                            <h1>Breadcrumb</h1>
                            <p class="lead text-dark">Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.</p>
                            <a href="https://getbootstrap.com/docs/4.3/components/breadcrumb/" target="_blank" class="btn btn-icon btn-primary mb-3">
                                <span class="btn-inner-icon"><i class="fas fa-info-circle"></i></span>
                                <span class="btn-inner-text">Bootstrap 4 documentation</span>
                            </a>
                        </div>
                        <div id="background-color" class="my-5">
                            <h5 class="mb-3">Background Color</h5>
                            <p>For changing background of breadcrumb, use contextual classes (e.g, <code class="text-danger">.breadcrumb-primary</code>).</p>
                            <div id="slides-only" class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-1" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-1" data-toggle="tab" href="#tab-content-1" role="tab" aria-controls="tab-link-1" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-2" data-toggle="tab" href="#tab-content-2" role="tab" aria-controls="tab-link-2" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent1">
                                            <div class="tab-pane fade show active" id="tab-content-1" role="tabpanel" aria-labelledby="tab-content-1">
                                                <div class="col-md-12">
                                                    <!--Breadcrumb-->
                                                    <nav aria-label="breadcrumb">
                                                        <ol class="breadcrumb breadcrumb-text-light breadcrumb-primary text-white">
                                                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                                                            <li class="breadcrumb-item"><a href="#">Library</a></li>
                                                            <li class="breadcrumb-item active" aria-current="page">Data</li>
                                                        </ol>
                                                    </nav>
                                                    <!--End of Breadcrumb-->
                                                    <!--Breadcrumb-->
                                                    <nav aria-label="breadcrumb">
                                                        <ol class="breadcrumb breadcrumb-text-light breadcrumb-secondary text-white">
                                                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                                                            <li class="breadcrumb-item"><a href="#">Library</a></li>
                                                            <li class="breadcrumb-item active" aria-current="page">Data</li>
                                                        </ol>
                                                    </nav>
                                                    <!--End of Breadcrumb-->
                                                    <!--Breadcrumb-->
                                                    <nav aria-label="breadcrumb">
                                                        <ol class="breadcrumb breadcrumb-text-light breadcrumb-tertiary text-white">
                                                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                                                            <li class="breadcrumb-item"><a href="#">Library</a></li>
                                                            <li class="breadcrumb-item active" aria-current="page">Data</li>
                                                        </ol>
                                                    </nav>
                                                    <!--End of Breadcrumb-->
                                                    <!--Breadcrumb-->
                                                    <nav aria-label="breadcrumb">
                                                        <ol class="breadcrumb breadcrumb-text-light breadcrumb-info text-white">
                                                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                                                            <li class="breadcrumb-item"><a href="#">Library</a></li>
                                                            <li class="breadcrumb-item active" aria-current="page">Data</li>
                                                        </ol>
                                                    </nav>
                                                    <!--End of Breadcrumb-->
                                                    <!--Breadcrumb-->
                                                    <nav aria-label="breadcrumb">
                                                        <ol class="breadcrumb breadcrumb-text-light breadcrumb-warning text-white">
                                                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                                                            <li class="breadcrumb-item"><a href="#">Library</a></li>
                                                            <li class="breadcrumb-item active" aria-current="page">Data</li>
                                                        </ol>
                                                    </nav>
                                                    <!--End of Breadcrumb-->
                                                    <!--Breadcrumb-->
                                                    <nav aria-label="breadcrumb">
                                                        <ol class="breadcrumb breadcrumb-text-light breadcrumb-danger text-white">
                                                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                                                            <li class="breadcrumb-item"><a href="#">Library</a></li>
                                                            <li class="breadcrumb-item active" aria-current="page">Data</li>
                                                        </ol>
                                                    </nav>
                                                    <!--End of Breadcrumb-->
                                                    <!--Breadcrumb-->
                                                    <nav aria-label="breadcrumb">
                                                        <ol class="breadcrumb breadcrumb-text-light breadcrumb-dark text-white">
                                                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                                                            <li class="breadcrumb-item"><a href="#">Library</a></li>
                                                            <li class="breadcrumb-item active" aria-current="page">Data</li>
                                                        </ol>
                                                    </nav>
                                                    <!--End of Breadcrumb-->
                                                    <!--Breadcrumb-->
                                                    <nav aria-label="breadcrumb">
                                                        <ol class="breadcrumb breadcrumb-text-light breadcrumb-gray text-white">
                                                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                                                            <li class="breadcrumb-item"><a href="#">Library</a></li>
                                                            <li class="breadcrumb-item active" aria-current="page">Data</li>
                                                        </ol>
                                                    </nav>
                                                    <!--End of Breadcrumb-->
                                                    <!--Breadcrumb-->
                                                    <nav aria-label="breadcrumb">
                                                        <ol class="breadcrumb breadcrumb-text-light breadcrumb-light text-white">
                                                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                                                            <li class="breadcrumb-item"><a href="#">Library</a></li>
                                                            <li class="breadcrumb-item active" aria-current="page">Data</li>
                                                        </ol>
                                                    </nav>
                                                    <!--End of Breadcrumb-->
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-2" role="tabpanel" aria-labelledby="tab-content-2">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&lt;!--Breadcrumb--&gt;
&lt;nav aria-label=&quot;breadcrumb&quot;&gt;
    &lt;ol class=&quot;breadcrumb breadcrumb-text-light breadcrumb-primary text-white&quot;&gt;
        &lt;li class=&quot;breadcrumb-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;breadcrumb-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Library&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;breadcrumb-item active&quot; aria-current=&quot;page&quot;&gt;Data&lt;/li&gt;
    &lt;/ol&gt;
&lt;/nav&gt;
&lt;!--End of Breadcrumb--&gt;
&lt;!--Breadcrumb--&gt;
&lt;nav aria-label=&quot;breadcrumb&quot;&gt;
    &lt;ol class=&quot;breadcrumb breadcrumb-text-light breadcrumb-secondary text-white&quot;&gt;
        &lt;li class=&quot;breadcrumb-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;breadcrumb-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Library&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;breadcrumb-item active&quot; aria-current=&quot;page&quot;&gt;Data&lt;/li&gt;
    &lt;/ol&gt;
&lt;/nav&gt;
&lt;!--End of Breadcrumb--&gt;
&lt;!--Breadcrumb--&gt;
&lt;nav aria-label=&quot;breadcrumb&quot;&gt;
    &lt;ol class=&quot;breadcrumb breadcrumb-text-light breadcrumb-tertiary text-white&quot;&gt;
        &lt;li class=&quot;breadcrumb-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;breadcrumb-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Library&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;breadcrumb-item active&quot; aria-current=&quot;page&quot;&gt;Data&lt;/li&gt;
    &lt;/ol&gt;
&lt;/nav&gt;
&lt;!--End of Breadcrumb--&gt;
&lt;!--Breadcrumb--&gt;
&lt;nav aria-label=&quot;breadcrumb&quot;&gt;
    &lt;ol class=&quot;breadcrumb breadcrumb-text-light breadcrumb-info text-white&quot;&gt;
        &lt;li class=&quot;breadcrumb-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;breadcrumb-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Library&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;breadcrumb-item active&quot; aria-current=&quot;page&quot;&gt;Data&lt;/li&gt;
    &lt;/ol&gt;
&lt;/nav&gt;
&lt;!--End of Breadcrumb--&gt;
&lt;!--Breadcrumb--&gt;
&lt;nav aria-label=&quot;breadcrumb&quot;&gt;
    &lt;ol class=&quot;breadcrumb breadcrumb-text-light breadcrumb-warning text-white&quot;&gt;
        &lt;li class=&quot;breadcrumb-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;breadcrumb-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Library&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;breadcrumb-item active&quot; aria-current=&quot;page&quot;&gt;Data&lt;/li&gt;
    &lt;/ol&gt;
&lt;/nav&gt;
&lt;!--End of Breadcrumb--&gt;
&lt;!--Breadcrumb--&gt;
&lt;nav aria-label=&quot;breadcrumb&quot;&gt;
    &lt;ol class=&quot;breadcrumb breadcrumb-text-light breadcrumb-danger text-white&quot;&gt;
        &lt;li class=&quot;breadcrumb-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;breadcrumb-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Library&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;breadcrumb-item active&quot; aria-current=&quot;page&quot;&gt;Data&lt;/li&gt;
    &lt;/ol&gt;
&lt;/nav&gt;
&lt;!--End of Breadcrumb--&gt;
&lt;!--Breadcrumb--&gt;
&lt;nav aria-label=&quot;breadcrumb&quot;&gt;
    &lt;ol class=&quot;breadcrumb breadcrumb-text-light breadcrumb-dark text-white&quot;&gt;
        &lt;li class=&quot;breadcrumb-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;breadcrumb-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Library&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;breadcrumb-item active&quot; aria-current=&quot;page&quot;&gt;Data&lt;/li&gt;
    &lt;/ol&gt;
&lt;/nav&gt;
&lt;!--End of Breadcrumb--&gt;
&lt;!--Breadcrumb--&gt;
&lt;nav aria-label=&quot;breadcrumb&quot;&gt;
    &lt;ol class=&quot;breadcrumb breadcrumb-text-light breadcrumb-gray text-white&quot;&gt;
        &lt;li class=&quot;breadcrumb-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;breadcrumb-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Library&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;breadcrumb-item active&quot; aria-current=&quot;page&quot;&gt;Data&lt;/li&gt;
    &lt;/ol&gt;
&lt;/nav&gt;
&lt;!--End of Breadcrumb--&gt;
&lt;!--Breadcrumb--&gt;
&lt;nav aria-label=&quot;breadcrumb&quot;&gt;
    &lt;ol class=&quot;breadcrumb breadcrumb-text-light breadcrumb-light text-white&quot;&gt;
        &lt;li class=&quot;breadcrumb-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;breadcrumb-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Library&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;breadcrumb-item active&quot; aria-current=&quot;page&quot;&gt;Data&lt;/li&gt;
    &lt;/ol&gt;
&lt;/nav&gt;
&lt;!--End of Breadcrumb--&gt;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="transparent-breadcrumb" class="my-5">
                            <h5 class="mb-3">Transparent</h5>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-2" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-3" data-toggle="tab" href="#tab-content-3" role="tab" aria-controls="tab-link-3" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-4" data-toggle="tab" href="#tab-content-4" role="tab" aria-controls="tab-link-4" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent2">
                                            <div class="tab-pane fade show active" id="tab-content-3" role="tabpanel" aria-labelledby="tab-content-3">
                                                <div class="col-md-12">
                                                    <!--Breadcrumb-->
                                                    <nav aria-label="breadcrumb">
                                                        <ol class="breadcrumb breadcrumb-transparent">
                                                            <li class="breadcrumb-item active" aria-current="page">Home</li>
                                                        </ol>
                                                    </nav>
                                                    <!--End of Breadcrumb-->
                                                    <!--Breadcrumb-->
                                                    <nav aria-label="breadcrumb">
                                                        <ol class="breadcrumb breadcrumb-transparent">
                                                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                                                            <li class="breadcrumb-item active" aria-current="page">Library</li>
                                                        </ol>
                                                    </nav>
                                                    <!--End of Breadcrumb-->
                                                    <!--Breadcrumb-->
                                                    <nav aria-label="breadcrumb">
                                                        <ol class="breadcrumb breadcrumb-transparent">
                                                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                                                            <li class="breadcrumb-item"><a href="#">Library</a></li>
                                                            <li class="breadcrumb-item active" aria-current="page">Data</li>
                                                        </ol>
                                                    </nav>
                                                    <!--End of Breadcrumb-->
                                                    <!--Breadcrumb-->
                                                    <nav aria-label="breadcrumb">
                                                        <ol class="breadcrumb breadcrumb-primary breadcrumb-transparent">
                                                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                                                            <li class="breadcrumb-item"><a href="#">Library</a></li>
                                                            <li class="breadcrumb-item active" aria-current="page">Data</li>
                                                        </ol>
                                                    </nav>
                                                    <!--End of Breadcrumb-->
                                                    <!--Breadcrumb-->
                                                    <nav aria-label="breadcrumb">
                                                        <ol class="breadcrumb breadcrumb-secondary breadcrumb-transparent">
                                                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                                                            <li class="breadcrumb-item"><a href="#">Library</a></li>
                                                            <li class="breadcrumb-item active" aria-current="page">Data</li>
                                                        </ol>
                                                    </nav>
                                                    <!--End of Breadcrumb-->
                                                    <!--Breadcrumb-->
                                                    <nav aria-label="breadcrumb">
                                                        <ol class="breadcrumb breadcrumb-tertiary breadcrumb-transparent">
                                                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                                                            <li class="breadcrumb-item"><a href="#">Library</a></li>
                                                            <li class="breadcrumb-item active" aria-current="page">Data</li>
                                                        </ol>
                                                    </nav>
                                                    <!--End of Breadcrumb-->
                                                    <!--Breadcrumb-->
                                                    <nav aria-label="breadcrumb">
                                                        <ol class="breadcrumb breadcrumb-info breadcrumb-transparent">
                                                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                                                            <li class="breadcrumb-item"><a href="#">Library</a></li>
                                                            <li class="breadcrumb-item active" aria-current="page">Data</li>
                                                        </ol>
                                                    </nav>
                                                    <!--End of Breadcrumb-->
                                                    <!--Breadcrumb-->
                                                    <nav aria-label="breadcrumb">
                                                        <ol class="breadcrumb breadcrumb-warning breadcrumb-transparent">
                                                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                                                            <li class="breadcrumb-item"><a href="#">Library</a></li>
                                                            <li class="breadcrumb-item active" aria-current="page">Data</li>
                                                        </ol>
                                                    </nav>
                                                    <!--End of Breadcrumb-->
                                                    <!--Breadcrumb-->
                                                    <nav aria-label="breadcrumb">
                                                        <ol class="breadcrumb breadcrumb-danger breadcrumb-transparent">
                                                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                                                            <li class="breadcrumb-item"><a href="#">Library</a></li>
                                                            <li class="breadcrumb-item active" aria-current="page">Data</li>
                                                        </ol>
                                                    </nav>
                                                    <!--End of Breadcrumb-->
                                                    <!--Breadcrumb-->
                                                    <nav aria-label="breadcrumb">
                                                        <ol class="breadcrumb breadcrumb-dark breadcrumb-transparent">
                                                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                                                            <li class="breadcrumb-item"><a href="#">Library</a></li>
                                                            <li class="breadcrumb-item active" aria-current="page">Data</li>
                                                        </ol>
                                                    </nav>
                                                    <!--End of Breadcrumb-->
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-4" role="tabpanel" aria-labelledby="tab-content-4">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&lt;!--Breadcrumb--&gt;
&lt;nav aria-label=&quot;breadcrumb&quot;&gt;
    &lt;ol class=&quot;breadcrumb breadcrumb-transparent&quot;&gt;
        &lt;li class=&quot;breadcrumb-item active&quot; aria-current=&quot;page&quot;&gt;Home&lt;/li&gt;
    &lt;/ol&gt;
&lt;/nav&gt;
&lt;!--End of Breadcrumb--&gt;
&lt;!--Breadcrumb--&gt;
&lt;nav aria-label=&quot;breadcrumb&quot;&gt;
    &lt;ol class=&quot;breadcrumb breadcrumb-transparent&quot;&gt;
        &lt;li class=&quot;breadcrumb-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;breadcrumb-item active&quot; aria-current=&quot;page&quot;&gt;Library&lt;/li&gt;
    &lt;/ol&gt;
&lt;/nav&gt;
&lt;!--End of Breadcrumb--&gt;
&lt;!--Breadcrumb--&gt;
&lt;nav aria-label=&quot;breadcrumb&quot;&gt;
    &lt;ol class=&quot;breadcrumb breadcrumb-transparent&quot;&gt;
        &lt;li class=&quot;breadcrumb-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;breadcrumb-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Library&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;breadcrumb-item active&quot; aria-current=&quot;page&quot;&gt;Data&lt;/li&gt;
    &lt;/ol&gt;
&lt;/nav&gt;
&lt;!--End of Breadcrumb--&gt;
&lt;!--Breadcrumb--&gt;
&lt;nav aria-label=&quot;breadcrumb&quot;&gt;
    &lt;ol class=&quot;breadcrumb breadcrumb-primary breadcrumb-transparent&quot;&gt;
        &lt;li class=&quot;breadcrumb-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;breadcrumb-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Library&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;breadcrumb-item active&quot; aria-current=&quot;page&quot;&gt;Data&lt;/li&gt;
    &lt;/ol&gt;
&lt;/nav&gt;
&lt;!--End of Breadcrumb--&gt;
&lt;!--Breadcrumb--&gt;
&lt;nav aria-label=&quot;breadcrumb&quot;&gt;
    &lt;ol class=&quot;breadcrumb breadcrumb-secondary breadcrumb-transparent&quot;&gt;
        &lt;li class=&quot;breadcrumb-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;breadcrumb-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Library&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;breadcrumb-item active&quot; aria-current=&quot;page&quot;&gt;Data&lt;/li&gt;
    &lt;/ol&gt;
&lt;/nav&gt;
&lt;!--End of Breadcrumb--&gt;
&lt;!--Breadcrumb--&gt;
&lt;nav aria-label=&quot;breadcrumb&quot;&gt;
    &lt;ol class=&quot;breadcrumb breadcrumb-tertiary breadcrumb-transparent&quot;&gt;
        &lt;li class=&quot;breadcrumb-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;breadcrumb-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Library&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;breadcrumb-item active&quot; aria-current=&quot;page&quot;&gt;Data&lt;/li&gt;
    &lt;/ol&gt;
&lt;/nav&gt;
&lt;!--End of Breadcrumb--&gt;
&lt;!--Breadcrumb--&gt;
&lt;nav aria-label=&quot;breadcrumb&quot;&gt;
    &lt;ol class=&quot;breadcrumb breadcrumb-info breadcrumb-transparent&quot;&gt;
        &lt;li class=&quot;breadcrumb-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;breadcrumb-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Library&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;breadcrumb-item active&quot; aria-current=&quot;page&quot;&gt;Data&lt;/li&gt;
    &lt;/ol&gt;
&lt;/nav&gt;
&lt;!--End of Breadcrumb--&gt;
&lt;!--Breadcrumb--&gt;
&lt;nav aria-label=&quot;breadcrumb&quot;&gt;
    &lt;ol class=&quot;breadcrumb breadcrumb-warning breadcrumb-transparent&quot;&gt;
        &lt;li class=&quot;breadcrumb-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;breadcrumb-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Library&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;breadcrumb-item active&quot; aria-current=&quot;page&quot;&gt;Data&lt;/li&gt;
    &lt;/ol&gt;
&lt;/nav&gt;
&lt;!--End of Breadcrumb--&gt;
&lt;!--Breadcrumb--&gt;
&lt;nav aria-label=&quot;breadcrumb&quot;&gt;
    &lt;ol class=&quot;breadcrumb breadcrumb-danger breadcrumb-transparent&quot;&gt;
        &lt;li class=&quot;breadcrumb-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;breadcrumb-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Library&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;breadcrumb-item active&quot; aria-current=&quot;page&quot;&gt;Data&lt;/li&gt;
    &lt;/ol&gt;
&lt;/nav&gt;
&lt;!--End of Breadcrumb--&gt;
&lt;!--Breadcrumb--&gt;
&lt;nav aria-label=&quot;breadcrumb&quot;&gt;
    &lt;ol class=&quot;breadcrumb breadcrumb-dark breadcrumb-transparent&quot;&gt;
        &lt;li class=&quot;breadcrumb-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;breadcrumb-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Library&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;breadcrumb-item active&quot; aria-current=&quot;page&quot;&gt;Data&lt;/li&gt;
    &lt;/ol&gt;
&lt;/nav&gt;
&lt;!--End of Breadcrumb--&gt;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <h5>Changing the separator</h5>
                        <p>Separators are automatically added in CSS through <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::before"><code
                                    class="text-info">::before</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/content"><code
                                    class="text-info">content</code></a>. They can be changed by changing <code class="text-danger">$breadcrumb-divider</code>. The <a href="https://sass-lang.com/docs/Sass/Script/Functions.html#quote-instance_method">quote</a>                            function is needed to generate the quotes around a string, so if you want <code class="text-danger">&gt;</code> as separator, you can use this:</p>
                        <div>
                            <pre class="bg-white">
                                    <code class="language-css">
$breadcrumb-divider: quote(&quot;&gt;&quot;);
                                    </code>
                                </pre>
                        </div>
                        <p>It’s also possible to use a base64 embedded SVG icon:</p>
                        <div>
                            <pre class="bg-white">
                                    <code class="language-css">
$breadcrumb-divider: url(-middlejAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);
                                    </code>
                                </pre>
                        </div>
                        <p>It’s also possible to use a FontAwesome icon.</p>
                        <p>Go to <code class="text-danger">breadcrumbs.scss</code> file and you will see this:</p>
                        <div>
                            <pre class="bg-white">
                                    <code class="language-css">
.breadcrumb-item{
    + .breadcrumb-item{
        &amp;:before{
        content: &quot;\f101&quot;;
        font-family: $font-awesome-5;
        font-weight: 900;
        font-size: .625rem;
        color: $breadcrumb-divider-color;
        }
    }
}                                    </code>
                                </pre>
                        </div>
                    </div>
                    <div class="col-xl-2 col-lg-3 d-none d-lg-block py-md-1 doc-sidebar border-left">
                        <ul class="nav flex-column">
                            <li class="nav-item">
                                <a href="#background-color" class="nav-link" data-smooth-scroll>Background</a>
                            </li>
                            <li class="nav-item">
                                <a href="#transparent-breadcrumb" class="nav-link " data-smooth-scroll>Transparent</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- End of content -->
            </div>
        </div>
    </section>
    @@include('./_scripts.html', {
        "path": "../.."
    })
</body>

</html>